<!--
 * @Author: wangjh wangjiahui0710@163.com
 * @Date: 2024-06-11 11:33:49
 * @LastEditors: wangjh wangjiahui0710@163.com
 * @LastEditTime: 2024-07-26 15:06:07
 * @FilePath: \cip-admin\src\components\table-widget\table-widget.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!-- 拓展ElTable,column可作为props传入 -->
<script lang="ts" setup>
import type { TableColumnCtx, TableInstance } from "element-plus";
import type { VNodeChild } from "vue";
import { createVNode } from "vue";

import { exportTableByVNode } from "@/utils/table-util";

import TableWidget from "./table-widget.vue";
export type TableColumnProps<T = any> = Partial<TableColumnCtx<T>>;

export interface TableColumnOption<T = any>
	extends Omit<TableColumnProps<T>, "prop"> {
	prop?: keyof T | any;
	/**
	 * 是否不导出该列
	 */
	noExport?: boolean;
	[x: string]: any;
}

export interface TableWidgetProps<T = any> {
	data?: T[];
	columns?: TableColumnOption<T | any>[];
}
defineOptions({ name: "TableWidget", extends: ElTable });

const props = defineProps<TableWidgetProps>();

defineSlots<{
	/**
	 * 插入至表格最后一行之后的内容， 如果需要对表格的内容进行无限滚动操作，可能需要用到这个 slot。 若表格有合计行，该 slot 会位于合计行之上。
	 */
	append?: () => VNodeChild;
	/**
	 * 当数据为空时自定义的内容
	 */
	empty?: () => VNodeChild;
}>();

const vm = getCurrentInstance();

const omit = () => {
	const { columns, ...res } = vm?.proxy?.$.vnode.props ?? {};
	return res;
};

const tableRef = shallowRef<TableInstance>();

/**
 * 导出表格
 * @param name 文件名
 * @param data 导出的数据，若不传则使用props传入的数据
 */
const exportTable = (name: string, data?: any[]) => {
	const columns = props.columns?.filter((item) => !item.noExport);
	// console.log(props.data)
  const vnode = createVNode(TableWidget, {
		...omit(),
		columns,
		data: data ?? props.data,
	});
	exportTableByVNode(vnode, `${name}.xls`);
};

defineExpose({
	table: tableRef,
	/**
	 * 导出表格
	 * @param name 文件名
	 * @param data 导出的数据，若不传则使用props传入的数据
	 */
	exportTable,
});
</script>

<template>
	<ElTable
		show-overflow-tooltip
		v-bind="omit()"
		ref="tableRef"
		size="small"
		:tooltip-options="{}"

	>
  <!-- <el-table-column type="index" width="50" /> -->
		<template #append="scope">
			<slot name="append" v-bind="scope" />
		</template>
		<template #empty="scope">
			<slot name="empty" v-bind="scope" />
		</template>
		<template
			v-for="(column, _index) in columns as any"
			:key="column.id ?? _index"
		>
			<template v-if="column.prop && $slots[column.prop]">
				<component :is="$slots[column.prop]" />
			</template>
			<ElTableColumn v-else v-bind="column" />
		</template>
	</ElTable>
</template>

<style lang="css">
.el-popper {
	max-width: 50%;
}
</style>
